<template>
  <div style="background:#F7F7F7;    height: 100%;">
    <div class="bg oh" style="height:1.7rem">
      <!-- <van-nav-bar title="制定计划" left-arrow @click-left="onClickLeft" /> -->
      <div class="cardbg"></div>
    </div>
    <div class="bankbg bg-fff">
      <img v-if="cardDetial.bankCode" :src="cardDetial.bankCode| fmtBankimsrc" alt />
      <div
        class="ellipsis"
        style=" width:60%;display: inline-block;margin-left: 10px;    position: relative;"
      >
        <span class="f-30">{{cardDetial.bank}}</span>
        <span class="f-b f-30">【{{cardDetial.bankCard | fmtCardNo }}】</span>
        <p class="f-26" style="color:#949494;text-align: left; ">信用卡</p>
      </div>
      <div style=" display: inline-block;float: right;">
        <p style="color:#949494">可用还款</p>
        <span
          class="f-36"
          style="text-align: right;display: inline-block; width: 100%;"
        >{{cardDetial.overTime}}天</span>
      </div>
    </div>
    <div style="margin-bottom: 30px;" class="mag-l-40 mag-r-40 bord-radius-5">
      <div class="con">
        <p>总还款金额(元)</p>
        <input v-model="zje" type="number" class="amount" placeholder="请输入金额" @change="jjssc" />
      </div>
      <!-- <div class="con1">
              <van-cell style="border-bottom:1px solid #EBEBEB;" is-link @click="sclist.sclist=true" title="还款储蓄卡" >
                  <span v-if="sclist.scdata.cardNumber==undefined" style="color:#949494;">请选择</span>
                  <span v-else>
                      <img :src="sclist.scdata.issuingBank | fmtBankimsrc" style="width: 17px;  margin-right: 4px;  position: relative; top: 3px;"/>{{ sclist.scdata.issuingBank| fmtBankCode }}({{sclist.scdata.cardNumber | fmtCardNo}})
                  </span>
              </van-cell>
      </div>-->
      <!-- 还款储蓄卡列表 -->
      <van-popup v-model="sclist.sclist" position="top" :overlay="true">
        <ul>
          <div style="padding:20px;font-size:16px;">请选择还款储蓄卡</div>
          <li
            v-for="(item,index) in sclist.list"
            :key="index"
            class="bortop1"
            style="padding:5px  20px;letter-spacing:1px;"
            @click="ScClick(item)"
          >
            <van-row>
              <van-col span="3">
                <img :src="item.issuingBank | fmtBankimsrc" alt width="100%" />
              </van-col>
              <van-col span="18" style="margin-left: 10px;position: relative; top: .3rem;">
                <p>{{item.issuingBank | fmtBankCode}}</p>
                <p>{{item.cardNumber}}</p>
              </van-col>
            </van-row>
          </li>
        </ul>
      </van-popup>
      <div class="con1">
        <van-cell
          @click="hkrl"
          style="border-bottom:1px solid #EBEBEB;"
          v-if="sendData.repNum==''"
          title="还款次数"
          is-link
        >
          <span style="color:#949494;">请选择</span>
        </van-cell>
        <van-cell
          @click="hkrl"
          style="border-bottom:1px solid #EBEBEB;"
          v-else
          title="还款次数"
          is-link
        >
          <span>{{sendData.repNum}}次</span>
        </van-cell>
      </div>
      <!-- 制定时间 -->
      <div class="bg-fff f-30 pad-20 pad-l-50" style="padding-right:0.55rem;">
        <div  class="fiex pad-b-30" style="border-bottom: 1px solid rgb(235, 235, 235);">
          <div class="fiex pr">
            <span  class="mag-r-20">执行日期</span>
            <van-icon @click="tipShow=true" color="#1989fa" name="question-o" />
            <div @click="tipShow=false" v-if="tipShow">
                <div class="sj-up pa" style="top:10px;left:1.4rem"></div>
                <div  class="pa fff pad-10 f-20 center" style="left:0.5rem;background: rgba(0,0,0,.5);border-radius: 5px; width:60vw;z-index:2;top:30px">
                选择【每天连续】后，制定的计划，在出账单日以后，每天连续执行，每天固定两笔还款，快速结束；选择【智能随机】后，制定的计划，在账单日和还款日之间的可用执行时间内，随机选择几天，每天1到2次还款
                </div>
            </div>
            </div>
          <div @click="timeRuleSelShow=true" class="f-right fiex1 c96">
            <span v-if="timeRule==1">智能随机</span>
            <span v-if="timeRule==2">每天连续</span>
          </div>
          <van-icon name="arrow" class="mag-l-10 c96" />
        </div>
      </div>
      <van-popup v-model="timeRuleSelShow" position="bottom" :overlay="true">
        <van-picker
          @cancel="timeRuleSelShow=false"
          @confirm="timeRuleSelFun"
          show-toolbar
          :columns="createTime"
        />
      </van-popup>
      <!-- 制定时间end -->
      <!-- 还款次数选择组件 -->
      <van-popup v-model="hkshow" position="bottom" :overlay="true">
        <van-area
          :area-list="sendData.hkJosn"
          @cancel="hkshow=false"
          columns-num="1"
          title="还款次数"
          @confirm="selhkOk"
        />
      </van-popup>
      <!-- 落地城市 -->
      <div class="con1">
        <van-cell @click="addshow=true" v-if="this.$store.state.city==''" title="落地城市" is-link>
          <span style="color:#949494;">请选择</span>
        </van-cell>
        <van-cell @click="addshow=true" v-else title="落地城市" is-link>
          <span>{{this.$store.state.city}}</span>
        </van-cell>
      </div>
    </div>
    <div class="con3 pad-l-40 pad-r-40">
      <button @click="yljh">预览方案</button>
    </div>
    <div
      class="con3 pad-l-40 pad-r-40"
      style="margin-bottom: 17px;color:#949494; margin-top: 20px; font-size:0.25rem;"
    >
      <p>计划须知：</p>
      <p>1，总还款次数：是系统根据您输入的还款金额智能推算出的还款次数区间，可供选择。</p>
      <p>2，大额懒人模式每组还款对应两到四笔消费随机</p>
      <p>3，大额懒人模式每天固定一组还款，选择的还款总次数越大，相对还款天数越长，预留本金越小，反之同理。</p>
      <p>举例：</p>
      <p>如：卡上资金有点少，优先选择高次数</p>
      <p>如：想快点还完账单，优先选择低次数</p>
      <p>如：想计划尽快结束，优先选择每天连续执行 + 低次数</p>
      <p>如：想计划不连续执行，避免规律消费，优选执行日期智能随机</p>
      <p>4.计划生成后，可在计划制定页面，查询计划。</p>
      
      <!-- <p>{{url}}</p> -->
    </div>
    <van-popup v-model="addshow" position="bottom" :overlay="true">
      <van-picker
        show-toolbar
        :columns="areaList"
        value-key="name"
        @change="onAreaChange"
        @cancel="addshow=false"
        title="请选择地区"
        @confirm="saveaddress"
      />
    </van-popup>
  </div>
</template>

<script>
var $th = "";
import AreaList from "../are";
import { Dialog } from "vant";
export default {
  data() {
    return {
      areaList: [{ values: [] }, { values: [] }], //省市县二级联动数据
      tipShow:false,//弹窗提示
      cardDetial: {}, //卡详情
      timeRule: "1", //1:时间随机 2:时间连续
      timeRuleSelShow: false, //制定时间选择开关
      createTime: [
        //创建时间
        { text: "每天连续", date: "2" },
        { text: "智能随机", date: "1" }
      ],
      addshow: false,
      province: "",
      address: "",
      zje: "", //还款金额
      hkrq: "请选择还款日期",
      list: false,
      sendData: {
        repNum: "",
        hkJosn: {
          province_list: {}
        } //次数
      },
      hkshow: false,
      sclist: {
        //还款储蓄卡
        sclist: false, //还款储蓄卡列表是否展示
        list: [],
        scdata: {}
      },
      url: ""
    };
  },
  created() {
    this.$store.state.city = "";
    this.$store.state.ylPlanTitle = "预览计划(大额)"; //动态修改计划预览的title
    console.log(this.$store.state.city);
    this.$Spin.hide();
    if (this.$route.params.days) {
      this.hkrq = this.$route.params.days;
    }
    //  this.cliked();
    console.log();
  },
  async mounted() {
    $th = this;
    var cardId = $th.getUrl("id");
    cardId = localStorage.getItem("id");
    $th.url = window.location.href;
    console.log("cardId", cardId);
    try {
      var cardDetial = await $th.$axiosFun(
        "/customer/bankCard/findCardById",
        {
          id: cardId
        },
        "get"
      );
      if (cardDetial.code == 1000) {
          $th.cardDetial = cardDetial.data;
          $th.cardDetial.overTime = $th.$fmthkdate(
          $th.cardDetial.statementDate,
          $th.cardDetial.repaymentDate
        ); //计算距离账单日的时间
      } else {
        $th.$toast(cardDetial.message);
      }
      this.getArea("0", 0); //获取城市类别
      console.log("接口返回的结果", cardDetial);
    } catch (error) {
      console.log("error", error);
    }
  },
  methods: {
    timeRuleSelFun(val) {
      //选择制定时间
      console.log("val", val);
      $th.timeRule = val.date;
      $th.timeRuleSelShow = false;
    },
    //当地区选择变化时
    onAreaChange(picker, values, index) {
      console.log("values",values)
      if (index < 1) {
        this.getArea(values[index].id, index + 1); //传参 参数为上层选择的地区的code
      }
    },
    async getArea(ParentId, index) {
      //获取城市
     
      if (ParentId == "999") {
        //一级选择的为请选择清空二级数据
        $th.areaList[index].values = [];
        this.areaList = [...this.areaList]; //更新数据
        return;
      }
      console.log(2)
    //  var sendUrl = "https://community.1818pay.cn/common/aisle/rule/area/getProvinceList?productIdentif=PB999";
     var sendUrl = "https://community.1818pay.cn/plan/aisle/ruleArea/getProvinceList?productIdentif=PB100";
      if(index==1){ //1:选择的为市
        // sendUrl = "https://community.1818pay.cn/common/aisle/rule/area/getCityByProvinceCode?productIdentif=PB999";
        sendUrl = "https://community.1818pay.cn/plan/aisle/ruleArea/getCityByProvinceCode?productIdentif=PB100";
      }
      var findList = await $th.$getAxios(
        sendUrl,
        { provinceCode: ParentId,
          property:"1",
          programNameWeb:"kyq",
         },
        "get"
      );
      if (findList.code == "1000") {
        if (index == 1) {
          $th.areaList[index].values = []; //清空上一次的选择结果
        } else {
          $th.areaList[index].values = [{ name: "请选择", id: 999 }]; //清空上一次的选择结果
        }

       if(index==1){
           $.each(findList.data, function(k, v) {
              $th.areaList[index].values.push({
                name: v.areaName,
                id: v.provinceCode,
                areaCode: v.areaCode,
              });
            });
        }else{
           $.each(findList.data, function(k, v) {
              $th.areaList[index].values.push({
                name: v.provinceName,
                id: v.provinceCode,
                areaCode: v.areaCode,
              });
            });
        }
        this.areaList = [...this.areaList]; //更新数据
        console.log("$th.areaList[index]", $th.areaList[index]);
      } else {
        $th.$toast(findList.message);
      }
    },
    //选择储蓄卡
    ScClick(item) {
      this.sclist.scdata = item;
      console.log(this.sclist.scdata);
      this.sclist.sclist = false;
    },
    //选择还款次数
    selhkOk(val) {
      console.log(val);
      this.sendData.repNum = val[0].name;
      console.log(val[0]);
      this.hkshow = false;
    },

    async yljh() {
      this.$store.state.amout = this.zje;
      $th.cardDetial.totalRepaymentPrice = this.zje;
      if (this.$store.state.amout < 1) {
        this.$Message.error("请输入正确的金额");
        return;
      }
      if (this.sendData.repNum == "") {
        this.$Message.error("请选择还款次数");
        return;
      }
      if (this.$store.state.city == "") {
        this.$Message.error("请选择落地城市");
        return;
      }
      var sendData = {};
      sendData.programNameWeb  = 'kyq';
      sendData.timeRule = $th.timeRule; //创建计划时间
      sendData.customerId = $th.cardDetial.customerId; //用户id
      sendData.cardId = $th.cardDetial.id; //卡id
      sendData.model = 5; //10  模式 1本金最少 2时间最短 3系统推荐 4储蓄卡模式 5:信用卡大额 3
      sendData.bankCode = $th.cardDetial.bankCode; //银行标识
      sendData.totalRepaymentPrice = $th.$accMul(
        $th.cardDetial.totalRepaymentPrice,
        100
      ); //总还款金额
      sendData.ldProvince = $th.cardDetial.ldProvince; //省
      sendData.ldCity = $th.cardDetial.ldCity; //市
      sendData.repaymentNum = $th.sendData.repNum; //还款次数
      sendData.productIdentif = "PB100"; //产品标识  PS888
      sendData.closeCardId = $th.cardDetial.id; //结算卡id

      try {
        var cardDetial = await $th.$axiosFun(
          "/plan/plan/createPlan",
          sendData,
          "post"
        );
        if (cardDetial.code == 1000) {
          //预览成功
          localStorage.setItem("createPlan", JSON.stringify(sendData));
          $th.$router.push("/jhyl");
        } else {
          $th.$toast(cardDetial.message);
        }
        console.log("接口返回的结果", cardDetial);
      } catch (error) {
        console.log("error", error);
      }

      console.log("提价的数据", sendData);
    },
    //返回次数
    async hkrl() {
      console.log(this.zje);
      this.$store.state.amout = this.zje;
      if (this.$store.state.amout < 1) {
        this.$Message.error("请输入正确的金额");
        return;
      }
      var money = $th.$accMul(this.$store.state.amout, 100);

      if (money < 50000) {
        this.$Message.error("最少500元");
        return;
      }
      if (money > 30000000) {
        this.$Message.error("最多30W元");
        return;
      }
      var sendData = {
        cardId: $th.cardDetial.id,
        totalAmount: $th.$accMul($th.zje, 100)
      };
      console.log("提交的数据", sendData);
      console.log("金额", this.zje);
      //计算还款次数
      try {
        var cardDetial = await $th.$axiosFun(
          "/plan/plan/getRepaymentNumNine",
          sendData,
          "get"
        );
        if (cardDetial.code == 1000) {
          if (cardDetial.data) {
            $th.sendData.hkJosn.province_list = {};
            var dataArr = cardDetial.data.split(",");
            for (var i = dataArr.length - 1; i >= 0; i--) {
              $th.sendData.hkJosn.province_list[i + "s"] = dataArr[i];
            }
            console.log(
              " $th.sendData.hkJosn.province_list",
              $th.sendData.hkJosn.province_list
            );
            $th.hkshow = true;
          } else {
            $th.$toast("可制定时间不足");
          }
        } else {
          $th.$toast(cardDetial.message);
        }
      } catch (error) {
        console.log("error", error);
      }
      console.log("接口请求完成", cardDetial);
    },
    jjssc() {
      this.sendData.repNum = "";
      if (this.zje % 1 != 0) {
        this.$Message.error("请输入整数");
        this.zje = Math.round(this.zje);
      }
      this.zje = Math.round(this.zje);
    },
    onClickLeft() {
      this.$router.push("/");
    },
    saveaddress(value) {
      if (value[0].id != "999") {
        this.addshow = false;
        $th.cardDetial.ldProvince = value[0].id; //省id
        $th.cardDetial.ldCity = value[1].areaCode; //市id
        this.$store.state.city = value[1].name;
      } else {
        $th.$toast("请选择城市");
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.van-cell {
  display: -webkit-box;
}
.bg {
  background: url(../../assets/bg.png) no-repeat;
}
.cardbg {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  background: #fff;
  font-size: 0.26rem;
  border-radius: 5px 5px 0px 0px;
}
.bankbg {
  width: 90%;
  border-radius: 5px;
  margin: 10px auto;
  padding: 20px 15px;
  margin-top: -1rem;
  img {
    width: 45px;
    height: 45px;
  }
  .gps {
    width: auto;
  }
  .rig {
    float: right;
    width: auto;
    height: 15px;
    margin-top: 5px;
  }
}

.con {
  margin: 0 auto;
  background: white;
  text-align: center;
  border-bottom: 1px solid #ebebeb;
  margin-top: 10px;
  padding: 30px 0;

  p {
    color: #303030;
    font-size: 0.3rem;
  }

  .amount {
    background: none;
    color: #303030;
    border: none;
    border-bottom: 1px solid #ebebeb;
    width: 60%;
    text-align: center;
    font-size: 0.48rem;
    margin-top: 20px;
    padding-bottom: 10px;
  }
}

.con1 {
  margin: 0 auto;
  background-color: white;
  font-size: 16px;
  color: #636363;
  padding: 0.2rem 15px;
  padding-top: 0.1rem;
  p {
    line-height: 30px;
    margin: 10px 0;
  }
}

.con3 {
  margin: 0 auto;
  button {
    width: 100%;
    line-height: 40px;
    font-size: 0.3rem;
    background: #4f8bf4;
    color: white;
    border: none;
    border-radius: 4px;
  }
}

</style>